<template>
  <div class="list_item flex" @click="toDetail(i.id)">
    <div class="img_div">
      <img class="item_img" v-if="!i.isErr&&i.imgs" @error="i.isErr=true;$forceUpdate()" :src="i.imgs" alt="加载错误" />
      <img class="item_img" v-else src="http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/bgbgbg.png" />
    </div>
    <div class="info_div">
      <div class="info_name">{{i.name}}</div>
      <div class="info_desc mt6"><span v-for="i,k in i.type_names"><span v-if="k!==0">|</span>{{ i }} </span> </div>
      <div class="flex_ac mt6">
        <!-- <div class="yh">优惠</div> -->
        <div class="add">{{ i.address }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    i: {
      default:{}
    }
  },
  data() { 
    return {
      
    }
  },
  methods: {
    toDetail(id) {
      this.$router.push({name:'productDetail', query: { id }})
    }
  }
}
</script>
<style lang="scss" scoped>
.list_item{
  margin: 10px;
  padding: 20px 0;
  background: #FFFFFF;
  box-shadow: 0px 0px 4px 0px rgba(250,135,30,0.15);
  border-radius: 3px;
  .img_div{
    min-width: 67px;
    max-width: 67px;
    height: 67px;
    background: #FA871E;
    box-shadow: 0px 3px 9px 2px rgba(250,135,30,0.15);
    border-radius: 3px;
    margin: 0 10px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .info_div{
    width: calc(100% - 90px);
    overflow: hidden;
    .info_name{
      font-weight: bold;
      font-size: 15px;
      color: #000000;
    }
    .info_desc{
      font-size: 13px;
      color: #666666;
      span{
        display: inline-block;
        margin: 0 6px;
      }
    }
  }
  .yh{
    height: 18px;
    background: #FCEFE4;
    border-radius: 3px;
    line-height: 18px;
    padding:  0 6px;
    font-size: 12px;
    color: #FA871E;
    margin-right: 8px;
  }
  .add{
    font-size: 12px;
    color: #999999;
  }
}
</style>